<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>着色器实现像素动画-固定帧动画</title>
    <style>
        canvas{
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas width="512" height="512"></canvas>

    <script src="/common/lib/gl-renderer.js"></script>
    <script type="module">
        /**
         * gl-renderer用法
         * 1.创建renderer对象
         * 2.创建webgl程序
         * 3.设置uniform变量
         * 4.设置缓冲区数据
         * 5.渲染
         * 
         * */ 

        //  1.
         const canvas = document.querySelector("canvas");
         const renderer = new GlRenderer(canvas);

        (async function(){
            // 2.
            const vertex = `
                attribute vec2 a_vertexPosition;
                attribute vec2 uv;
                varying vec2 vUv;
                
                void main() {
                    gl_PointSize = 1.0;
                    vUv = uv;
                    gl_Position = vec4(a_vertexPosition, 1, 1);
                }
            `;
            const fragment = `
                #ifdef GL_ES
                    precision mediump float;
                #endif
    
                varying vec2 vUv;
                uniform sampler2D tMap;
                uniform int uFrameIndex;
                uniform vec2 uFrame[3];
                uniform float fWidth;
                
                void main() {
                    vec2 st = vUv;

                    for(int i = 0; i < 3; i++){
                        st.x = mix(uFrame[i].x, uFrame[i].y, vUv.x) / fWidth;
                        if(mod(float(uFrameIndex), 3.0) == float(i)) break;
                    }
                    
                    vec4 color = texture2D(tMap, st);
                    gl_FragColor = color;
                }
            `;
    
            const program = renderer.compileSync(fragment,vertex);
            renderer.useProgram(program);
    
            // 3.
            const texture = await renderer.loadTexture("https://p.ssl.qhimg.com/t01f265b6b6479fffc4.png");
            renderer.uniforms.tMap = texture;
            renderer.uniforms.fWidth = 272;
            renderer.uniforms.uFrameIndex = 0;
            renderer.uniforms.uFrame = [2, 88, 90, 176, 178, 264];
    
            // 4.
            const x = 44 / canvas.width;
            const y = 32 / canvas.height;
            renderer.setMeshData([{
                positions:[
                    [-x, -y],
                    [-x, y],
                    [x, y],
                    [x, -y],
                ],
                attributes:{
                    uv:[
                        [0, 0],
                        [0, 1],
                        [1, 1],
                        [1, 0],
                    ]
                },
                cells: [[0, 1, 2], [2, 0, 3]],
            }]);
    
            // 5.
            renderer.render();

            setInterval(() => {
                renderer.uniforms.uFrameIndex++;
            }, 200);

        })();

    </script>
</body>
</html>